<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/icon.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/default/datagrid.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/demo/demo.css">
    <style>
        #ad ul{
            list-style: none;
            padding-left: 5px;
            padding-right: 5px;
        }
        #ad ul>li{
            border: 1px dotted #5FB878;
        }
        #ad ul>li>a{
            width: 100%;
        }
    </style>
</head>
<body class="easyui-layout">
    <div data-options="title:'标题',region:'north',height:'30'"><a href=""></a><a href=""></a><a href=""></a></div>
    <div data-options="title:'底部',region:'south',height:'20'"><a href=""></a><a href=""></a><a href=""></a></div>
    <div data-options="title:'菜单',region:'west',width:'170'">
        <!--使用手风琴实现菜单-->
        <div id="ad">
            <div data-options="title:'用户管理'">
                <ul>
                    <li><a href="#" data-options="onClick:menu.addTabs" class="easyui-linkbutton">人擦</a></li>
                    <li><a href="#" class="easyui-linkbutton">市公司</a></li>
                    <li><a href="#" class="easyui-linkbutton">帅哥哥</a></li>
                    <li><a href="#" class="easyui-linkbutton">儿童袜</a></li>
                </ul>
            </div>
            <div data-options="title:'服务管理'">
                <ul>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
            <div data-options="title:'人事管理'">
                <ul>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-options="title:'主页',region:'center',width:'200'">
        <!--定义tab-->
        <div id="main_tabs">

        </div>
    </div>
    <div data-options="title:'通知',region:'east',width:'150'"><a href=""></a><a href=""></a><a href=""></a></div>
</body>
<script src="jquery-easyui-1.7.0/jquery.min.js"></script>
<script src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<script src="jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
<script>
    var menu = {
        addTabs:function(){
            //关闭第一个选项卡
            var r = $("#main_tabs").tabs('exists','用户管理');
            if (r){
                $("#main_tabs").tabs('select','用户管理')
            } else {
                $("#main_tabs").tabs('add',{
                    title:'用户管理',
                    href:'http://localhost:8080/cd.html',
                    closable:true
                });
            }

        }
    }
    $("#ad").accordion({
        fit:true,//自动填充父容器
    });
    //将按钮设置为简约版本
    $("#ad ul>li>a").linkbutton({
        plain:true,//将按钮设置为简约版本
    });
    //生效tabs
    $("#main_tabs").tabs();
</script>
</html>